<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
        <title>注册页</title>
        <jsp:include page="lbi/css.jsp"></jsp:include>
        <link rel="stylesheet" href="<c:url value="/static/css/user/register.css"/>"/>
    </head>

    <body>
        <div class="wrap">
            <!-- 头部开始-->
            <header>
                <div class="header common">
                    <ul class="left fl">
                        <li class="commones">
                            <a class="fl" href="#">欢迎您！</a>
                        </li>
                        <li class="name">
                            <!--登录前显示请登录-->
                            <a href="<c:url value="/toLogin.do"/>" class="selected-color">请登录</a>
                        </li>
                        <li>或</li>
                        <li class="register">
                            <a href="<c:url value="/toRegister.do"/>"><span class="selected-color">轻松注册</span></a>
                        </li>
                    </ul>

                    <ul class="right fr">
                        <li>
                            <a href="#"><img width="20px" height="20px" src="static/img/phone.png" /> 客服热线 ： 0512-67229422 (8:30-17:30)</a>
                        </li>
                    </ul>
                </div>
            </header>
            <!-- 头部结束-->
            <!--导航开始-->
            <nav class="nav">
                <div class="common">
                    <div class="left fl logo"><img src="static/img/logo.png"></div>
                    <div class="center fl" style="margin-left:50px;">
                        <ul class="fl">
                            <li>会员注册</li>
                        </ul>
                    </div>
                </div>
            </nav>
            <div class="nav_bottom common"></div>
            <!--导航结束-->
            <div class="registerWrapper common">
                <div class="form">
                    <form id="user_form">
	                    <table cellspacing="0" cellpadding="0">
	                        <tbody>
	                            <tr>
	                                <th><span>*</span>手机号：</th>
	                                <td>
	                                    <input type="text" class="inputClass" name="userName" id="mobilephone" placeholder="请输入您的手机号（作为登录用户名）" maxlength="11" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
	onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'0')}else{this.value=this.value.replace(/\D/g,'')}" />
	                                    <span class="tips" id="mobilephoneError"></span>
	                                </td>
	                            </tr>
	                            <tr>
									<th><span>*</span>联系人：</th>
									<td>
										<input type="text" class="inputClass" name="contacts" id="contact" placeholder="请输入联系人姓名" maxlength="11">
										&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="sex" value='1' id="male" />&nbsp;<label for="male">先生</label>
										&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="sex" value="2" id="female" checked  />&nbsp;<label for="female">女士</label>
										<span class="tips" id="contactError"></span>
									</td>
								</tr>
	                            <tr>
	                                <th><span>*</span>验证码：</th>
	                                <td>
	                                    <input type="text" class="inputClass" id="imgcode" maxlength="4" placeholder="图片验证码" style="width: 145px; float: left" />
	                                    <canvas class="yz_code" id="canvas" width="100" height="43" alt="看不清？点击换一张"></canvas>
	                                    <a href="javascript:void(0)" class="btn_change">换一张</a>
	                                    <span class="tips" id="imgcodeError"></span>
	                                </td>
	                            </tr>
	                            <tr>
	                                <th><span>*</span>短信验证码：</th>
	                                <td>
	                                    <input type="text" class="inputClass" name="mobilecode" id="mobilecode" autocomplete="new-mobilecode" maxlength="4" placeholder="短信验证码" style="width: 145px; float: left" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
	onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'0')}else{this.value=this.value.replace(/\D/g,'')}" />
	                                    <input type="button" id="btn_getcode" class="btns btns_erCode" onclick="settime(this)" value="获取验证码" />
	                                    <span class="tips" id="mobilecodeError"></span>
	                                </td>
	                            </tr>
	                            <tr>
	                                <th><span>*</span>设置密码：</th>
	                                <td>
	                                    <input type="password" name="password" id="loginpass" autocomplete="new-password" class="password inputClass" placeholder="6-18位密码" maxlength="18" />
	                                    <span class="tips" id="loginpassError"></span>
	                                </td>
	                            </tr>
	                            <tr>
	                                <th><span>*</span>确认密码：</th>
	                                <td>
	                                    <input type="password" id="reloginpass" name="pwd" autocomplete="new-password" class="password inputClass" placeholder="6-18位密码" maxlength="18" />
	                                    <span class="tips" id="reloginpassError"></span>
	                                </td>
	                            </tr>
	                            <tr>
	                                <th></th>
	                                <td><input type="checkbox" checked="checked" id="chk_agree"> 阅读并同意
	                                    <a href="/register/userAgreement" id="agreement" target="_blank">《再生网用户服务协议》</a>
	                                </td>
	                            </tr>
	                            <tr>
	                                <th></th>
	                                <td>
	                                    <a href="javascript:void(0);" id="btn_register" class="btns">立刻注册</a>
	                                </td>
	                            </tr>
	                        </tbody>
	                    </table>
                    </form>
                </div>
            </div>
				<div style="height: 50px;"></div>
                <footer class="common">
                <div class="footer-top">
                    <ul>
                        <li class="plqq">
                            <span class="icon"></span>
                            <h1>品种规格齐全</h1>
                        </li>
                        <li class="zzbz">
                            <span class="icon"></span>
                            <h1>质量可靠保障</h1>
                        </li>
                        <li class="jgyz">
                            <span class="icon"></span>
                            <h1>价格占有优势</h1>
                        </li>
                        <li class="qqbt">
                            <span class="icon"></span>
                            <h1>缺钱可打白条</h1>
                        </li>
                        <li class="mfzc">
                            <span class="icon"></span>
                            <h1>免费找货找车</h1>
                        </li>
                    </ul>
                </div>
                <div class="footer-bottom">
                    <h1 class="common tc">Copyright©right;2018 www.zaishengwang.com Inc. All rights reserved</h1>
                    <h2 class="common tc">苏ICP证161025号 | 苏ICP备15001001号 | 再生网</h2>
                </div>
            </footer>

        </div>
        <script type="text/javascript" src="<c:url value="/static/js/register.js/"/>"></script>
		<script type="text/javascript">
		
		var prevLink = document.referrer;
		var str =  prevLink.split("\/");
		var prevLink_last = str.pop();
		var prevLink_pre = str.join("\/");
        /*  
    	 * 5. 表单提交时进行校验  
    	 */
    	$("#btn_register").click(function() {
    		//手机号
            var phone = $("#mobilephone").val();
            //联系人
            var contact =$("#contact").val();
            //性别 1、先生 2、女士
            var male = Number($("input[name='sex']:checked").val());
            //短信验证码
            var mobilecode = $("#mobilecode").val();
            //密码
            var loginpass = $("#loginpass").val();
    		
    		var bool = true; //表示校验通过  
    		if(!validateMobilephone()) {
    			bool = false;
    		}
    		if(!validateLoginpass()) {
    			bool = false;
    		}
    		if(!validateReloginpass()) {
    			bool = false;
    		}
    		if(!validateImgcode()) {
    			bool = false;
    		}
    		//短信验证码
    		/* if(!validateMobilecode()) {
    			bool = false;
    		} */
    		if(!validateContact()){
    			bool = false;
    		}
    		if(!$("#chk_agree").is(':checked')) {
    			$("#chk_agree").parent().addClass("warn-color");
    		   bool =false;
    		}else {
    			$("#chk_agree").parent().removeClass("warn-color");
			}
    		console.log(bool);
    		if(bool == true){
    			var f = arguments.callee,self =this;
				$(self).unbind('click', f); 
    			$.ajax({
    				type:"post",
    				url:"<c:url value="/register.do"/>",
    				data:$("#user_form").serialize(),
    				success:function(data){
    					if (data.id !=null) {
    						if(prevLink_last=="toLogin.do"){
    							location.href = prevLink_pre + "/"+ index;
    						}else{
    							location.href = prevLink;
    						}
    						
    					}else{
    						$(self).click(f);
    					}
    				}
    			})
    		}
    	});
        
    			/*  
    			 * 登录名校验方法  
    			 */
    			function validateMobilephone() {
    			    var id = "mobilephone";
    			    var regMobile = /^1\d{10}$/;
    			    var value = $("#" + id).val(); //获取输入框内容  

    			    /*  
    			     * 1. 非空校验  
    			     */
    			    if(!value) {
    			        /*  
    			         * 获取对应的label  
    			         * 添加错误信息  
    			         * 显示label  
    			         */
    			        $("#" + id + "Error").text("手机号不能为空");
    			        showError($("#" + id + "Error"));
    			        return false;
    			    }
    			    /*  
    			     * 2. 长度校验  
    			     */
    			    if(!regMobile.test(value)) {
    			        /*  
    			         * 获取对应的label  
    			         * 添加错误信息  
    			         * 显示label  
    			         */
    			        $("#" + id + "Error").text("请输入11位有效手机号码");
    			        showError($("#" + id + "Error"));
    			        return false;
    			    }
    			    /*  
    			     * 3. 是否注册校验  
    			     */
    			    $.ajax({
    			    	url: "<c:url value="/serchUserName.do"/>",
    	                data: {
    	                    userName : value
    	                }, //给服务器的参数  
    			        type: "POST",
    			        dataType: "json",
    			        async: false, //是否异步请求，如果是异步，那么不会等服务器返回，我们这个函数就向下运行了。  
    			        cache: false,
    			        success: function(data) {
    			        	console.log(data);
    			        	if(data.result == 1) { //如果校验失败  
    			                $("#" + id + "Error").text("该手机号已被注册");
    			                showError($("#" + id + "Error"));
    			                return false;
    			            }
    			        }
    			    });
    			    return true;
    			}
        </script>
        
    </body>

</html>